<template>
  <el-dialog
    title="修改密码"
    :visible="visible"
    width="400px"
    @close="handleClose"
  >
    <el-form
      ref="passwordForm"
      :model="passwordForm"
      :rules="passwordRules"
      label-width="100px"
    >
      <el-form-item label="原密码" prop="oldPassword">
        <el-input
          v-model="passwordForm.oldPassword"
          type="password"
          placeholder="请输入原密码"
          show-password
        ></el-input>
      </el-form-item>
      
      <el-form-item label="新密码" prop="newPassword">
        <el-input
          v-model="passwordForm.newPassword"
          type="password"
          placeholder="请输入新密码"
          show-password
        ></el-input>
      </el-form-item>
      
      <el-form-item label="确认密码" prop="confirmPassword">
        <el-input
          v-model="passwordForm.confirmPassword"
          type="password"
          placeholder="请再次输入新密码"
          show-password
        ></el-input>
      </el-form-item>
    </el-form>
    
    <div slot="footer" class="dialog-footer">
      <el-button @click="handleClose">取消</el-button>
      <el-button type="primary" :loading="loading" @click="handleSubmit">
        {{ loading ? '修改中...' : '确认修改' }}
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: 'ChangePasswordDialog',
  props: {
    visible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    // 自定义验证规则：确认密码
    const validateConfirmPassword = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'));
      } else if (value !== this.passwordForm.newPassword) {
        callback(new Error('两次输入密码不一致!'));
      } else {
        callback();
      }
    };
    
    return {
      loading: false,
      passwordForm: {
        oldPassword: '',
        newPassword: '',
        confirmPassword: ''
      },
      passwordRules: {
        oldPassword: [
          { required: true, message: '请输入原密码', trigger: 'blur' },
          { min: 6, max: 20, message: '密码长度在 6 到 20 个字符', trigger: 'blur' }
        ],
        newPassword: [
          { required: true, message: '请输入新密码', trigger: 'blur' },
          { min: 6, max: 20, message: '密码长度在 6 到 20 个字符', trigger: 'blur' }
        ],
        confirmPassword: [
          { required: true, validator: validateConfirmPassword, trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    handleClose() {
      this.$refs.passwordForm.resetFields();
      this.$emit('update:visible', false);
    },
    
    handleSubmit() {
      this.$refs.passwordForm.validate(async (valid) => {
        if (valid) {
          this.loading = true;
          
          try {
            // 模拟修改密码API调用
            await this.changePasswordApi();
            
            this.$message.success('密码修改成功');
            this.handleClose();
            
          } catch (error) {
            this.$message.error(error.message || '密码修改失败');
          } finally {
            this.loading = false;
          }
        }
      });
    },
    
    // 模拟修改密码API
    changePasswordApi() {
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          // 简单的验证逻辑
          if (this.passwordForm.oldPassword === '123456') {
            resolve({ message: '密码修改成功' });
          } else {
            reject(new Error('原密码错误'));
          }
        }, 1000);
      });
    }
  }
}
</script>

<style scoped>
.dialog-footer {
  text-align: right;
}
</style>
